/*
 * @Author: your name
 * @Date: 2022-03-21 21:54:42
 * @LastEditTime: 2022-03-22 13:54:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-big-screen\src\components\map\index.js
 */

<template>
<div id="china_map_box">
    <div id="server_map" class="chinaMap" ></div>
      <!-- <div id="china_map"></div> -->
  </div>    
</template>
<script>
import echarts from "echarts";
import 'echarts/map/js/china.js'
export default {
    data() {
        return {
            provinceCode: '',
            list: [],
        }
    },
    mounted() {
        this.mychart = echarts.init(document.getElementById('server_map'));
        let _this = this;
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return (
                        '中国 ' + '<button class="more" style="color: red;" type="button" onclick="' +
                        _this.goToDetail(params.name) +
                        '">查 看></button>' + '<br>' +
                        params.name + '&nbsp' + params.value

                    );
                },
                enterable: true,
                alwaysShowContent: true,
                position: function (point) {
                    return [point[0] + 5, point[1] + 5];
                }
            },

            // 视觉映射组件
            visualMap: {
                type: 'piecewise', // 类型为分段型。
                splitNumber: '4', // 段数
                align: 'right',
                pieces: [
                    { min: 0, max: 25, label: '<25分', color: '#71C1FF', align: 'bottom' },
                    { min: 25, max: 50, label: '<50分', color: '#38A0FF', align: 'bottom' },
                    { min: 50, max: 75, label: '<75分', color: '#1180EC', align: 'bottom' },
                    { min: 75, label: '<100分', color: '#0153B7', align: 'bottom' },
                ],
                itemWidth: '15%',
                itemHeight: '10',
                orient: 'vertical', // 水平（'horizontal'）或者竖直（'vertical'）
                bottom: '10',
                left: '10',
                selectedMode: 'multiple', // 'multiple'（多选）,'single'（单选）
                inRange: {
                    color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                    symbolSize: [30, 100]
                }
            },
        };
        this.mychart.setOption(option);
    },
    methods: {
        // 首页地图
        serverMapDetail() {
            // 随机赋值
            var anyVal = function () {
                return Math.round(Math.random() * 100);
            }
            var server_data_list = [
                { name: '北京', value: anyVal() }, { name: '天津', value: anyVal() },
                { name: '上海', value: anyVal() }, { name: '重庆', value: anyVal() },
                { name: '河北', value: anyVal() }, { name: '河南', value: anyVal() },
                { name: '云南', value: anyVal() }, { name: '黑龙江', value: anyVal() },
                { name: '湖南', value: anyVal() }, { name: '山东', value: anyVal() },
                { name: '新疆', value: anyVal() }, { name: '浙江', value: anyVal() },
                { name: '江西', value: anyVal() }, { name: '湖北', value: anyVal() },
                { name: '广西', value: anyVal() }, { name: '甘肃', value: anyVal() },
                { name: '山西', value: anyVal() }, { name: '内蒙古', value: anyVal() },
                { name: '辽宁', value: anyVal() }, { name: '青海', value: anyVal() },
                { name: '安徽', value: anyVal() }, { name: '江苏', value: anyVal() },
                { name: '陕西', value: anyVal() }, { name: '吉林', value: anyVal() },
                { name: '福建', value: anyVal() }, { name: '贵州', value: anyVal() },
                { name: '广东', value: anyVal() }, { name: '西藏', value: anyVal() },
                { name: '四川', value: anyVal() }, { name: '宁夏', value: anyVal() },
                { name: '海南', value: anyVal() }, { name: '澳门', value: anyVal() },
                { name: '台湾', value: anyVal() }, { name: "南海诸岛", value: anyVal() }
            ]
            // 指定图表的配置项和数据
            this.mychart.setOption({
                series: [{
                    name: '中国 查看>',
                    type: 'map',
                    map: 'china',
                    geoIndex: 0,
                    data: server_data_list
                }],
            })
        },
        // 跳转省份下钻
        goToDetail(provinceCode) {
            // this.provinceCode = provinceCode;
            document.getElementById('server_map').addEventListener('click', (ev) => {
                let el = ev.target;
                if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
                    console.log(provinceCode)
                    // Emp.execute(`gotoProvince('')`)
                }
            })

        },
    },
    watch: {
        list(val) {
            if(val){
                this.serverMapDetail()
            }
        }
    }
 }
 </script>
 <style  scoped>
#server_map {
    height: 100%;
    width: 100%;
}

</style>
<style scoped>
    #china_map_box {
        height: 100%;
        position: relative;
    }
    #china_map_box #china_map{
        height: 100%;
    }
     #china_map_box .china_map_logo{
        position: absolute;
        top: 0;
        left: 0;
        width:45px;
     }
</style>
<style>
  #china_map .tooltip_style{
      line-height:1.7;
      overflow: hidden;
  }
  #china_map .tooltip_left{
      float: left;
  }
  #china_map .tooltip_right{
      float: right;
  }

</style>